<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影信息管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/common.css">
</head>
<body>
<div class="layui-col-md12">
    <!--数据表格开始-->
    <div class="layui-card">
        <div class="layui-card-body">
            <div>
                <button id="add-btn" class="layui-btn">新增 <i class="layui-icon">&#xe654;</i></button>
                <button id="enable" class="layui-btn">上映</button>
                <button id="disable" class="layui-btn">下映</button>
                <button id="del-btn" class="layui-btn layui-btn-danger">删除 <i class="layui-icon">&#xe640;</i></button>
            </div>
            <div class="layui-tab-item layui-show">
                <table id="tag-list"></table>
            </div>
        </div>
    </div>
    <!--数据表格结束-->
</div>


<div id="model" data-title="标签" style="display: none;padding:20px">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入标题"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required" title="选择">
                    <option value="0">禁用</option>
                    <option value="1">启用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit lay-filter="tag" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>


</body>

<script src="/static/layui/layui.js"></script>
<script>
    layui.config({base: '/static/'}).extend({common: 'js/common'}).use(['table', 'common', 'form', 'element'], function () {
        var common = layui.common,
            $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            table = layui.table;

        var update_table = function () {
            table.render({
                id: 'table',
                elem: '#tag-list',
                url: '/api/admin/tag',
                // page: true,
                cols: [[
                    {title: '', width: 40, type: 'checkbox', fixed: 'left'},
                    {field: 'id', width: 220, title: 'ID', type: 'text', fixed: 'left', sort: true},
                    {field: 'name', title: '标签名称', type: 'text', sort: true},
                    {field: 'ctime', title: '添加时间', sort: true},
                    {
                        field: 'status', title: '状态', type: 'text', templet: function (d) {
                            var status = ['禁用', '启用'];
                            return status[d.status];
                        }
                    },
                    {
                        title: '', width: 78, fixed: 'right', type: 'button', templet: function (d) {
                            return '<button data-id="' + d.id +
                                '" data-name="' + d.name +
                                '" data-status="' + d.status +
                                '" class="layui-btn layui-btn-sm edit-btn">编辑</button>';
                        }
                    }
                ]]
            });

        };

        update_table();

        $('#add-btn').on('click', function () {
            model = layer.open({
                type: 1,
                area: ['400px', 'auto'],
                title: '添加' + $('#model').data('title'),
                fixed: false, //不固定
                maxmin: true,
                content: $('#model'),
                success: function (layero, index) {
                    $('#model').show();
                },
                cancel: function (layero, index) {
                    $('#model').hide();
                }
            });
        });
        //处理更新和新增请求
        form.on('submit(tag)', function (data) {
            $.ajax({
                url: '/api/admin/tag' + (data.field.id ? '/' + data.field.id : ''),
                method: data.field.id ? 'PUT' : 'POST',
                data: data.field,
                dataType: 'json',
                success: function (resp, status, xhr) {
                    if (resp.code === 0) {
                        update_table();
                        layer.msg(resp.msg);
                    } else {
                        layer.msg(resp.msg);
                    }
                    layer.close(model);
                },
                error: function (resp) {
                    console.log(resp)
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //编辑
        $(document).on('click', 'button.edit-btn', function () {
            var that = this;
            model = layer.open({
                type: 1,
                area: ['400px', 'auto'],
                title: '编辑' + $('#model').data('title'),
                fixed: false, //不固定
                maxmin: true,
                content: $('#model'),
                success: function (layero, index) {
                    $(layero).find('input[name="id"]').val($(that).data('id'));
                    $(layero).find('input[name="name"]').val($(that).data('name'));
                    $(layero).find('select[name="status"]').val($(that).data('status'));
                    form.render('select');
                    $('#model').show();
                },
                cancel: function (layero, index) {
                    $('#model').hide();
                }
            });
        });
        // 启用
        $('#enable').on('click', function () {
            var checkeds = table.checkStatus('table');
            var ids = [];
            for (var i in checkeds.data) {
                ids.push(checkeds.data[i].id);
            }
            if (checkeds.data.length === 0) {
                layer.msg("请选择数据！", {icon: 2});
                return;
            }
            ids = ids.join(',');
            layer.confirm('是否启用选中的标签？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '/api/admin/tag',
                    method: 'PUT',
                    data: {'ids': ids, 'status': 1},
                    success: function (resp) {
                        if (resp.code === 0) {
                            update_table();
                            layer.msg(resp.msg, {icon: 1});
                        } else {
                            layer.msg(resp.msg, {icon: 2})
                        }
                    },
                    error: function () {

                    }
                });
            }, function () {
            });
        });

        $('#disable').on('click', function () {
            var checkeds = table.checkStatus('table');
            var ids = [];
            for (var i in checkeds.data) {
                ids.push(checkeds.data[i].id);
            }
            if (checkeds.data.length === 0) {
                layer.msg("请选择数据！", {icon: 2});
                return;
            }
            ids = ids.join(',');
            layer.confirm('是否禁用选中的标签？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '/api/admin/tag',
                    method: 'PUT',
                    data: {'ids': ids, 'status': 0},
                    success: function (resp) {
                        if (resp.code === 0) {
                            update_table();
                            layer.msg(resp.msg, {icon: 1});
                        } else {
                            layer.msg(resp.msg, {icon: -1})
                        }
                    },
                    error: function () {

                    }
                });
            }, function () {
            });
        });

        $('#del-btn').on('click', function () {
            var checkeds = table.checkStatus('table');
            var ids = [];
            for (var i in checkeds.data) {
                ids.push(checkeds.data[i].id);
            }
            if (checkeds.data.length === 0) {
                layer.msg("请选择数据！", {icon: 2});
                return;
            }
            ids = ids.join(',');
            layer.confirm('是否删除选中标签？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '/api/admin/tag',
                    method: 'DELETE',
                    data: {'ids': ids},
                    success: function (resp) {
                        if (resp.code === 0) {
                            update_table();
                            layer.msg(resp.msg, {icon: 1});
                        } else {
                            layer.msg(resp.msg, {icon: 2})
                        }
                    },
                    error: function () {

                    }
                });
            }, function () {
            });
        });
    });
</script>
</html>